<route lang="json5">
{
  style: {
        navigationBarTitleText: '邻里生活荟',
  },
}
</route>
<template>
  <view class="login-container relative">
    <image :src="bgLogin" class="absolute top-0 left-0 w-full h-full z-1" mode="aspectFill" />

    <view class="login-card relative z-2">
      <view class="logo-container">
        <img :src="logo" alt="WeChat Logo" class="logo-image" />
      </view>

      <view class="title">欢迎登录</view>

      <view class="login-form">
        <view class="login-btn text-center" @click="handleLogin">登录</view>
      </view>

      <view class="w-full flex justify-between items-center">
        <view class="privacy-policy flex flex-1">
          <wd-checkbox v-model="checked"></wd-checkbox>
          同意
          <text @click.stop="toArticle" class="text-blue">用户协议隐私政策</text>
        </view>

        <navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover" class="mt-48rpx">
          <text class="text-24rpx text-[#666] leading-32rpx">暂不登录返回首页</text>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store'
import { http } from '@/utils/http'
import { ref } from 'vue'

const nickname = ref('')
const avatar = ref('')

const checked = ref(false)

const logo = ref('')

const bgLogin = ref(null)

const toArticle = () => {
  uni.navigateTo({ url: '/pages/article/index?id=18' })
}

const getConfig = async () => {
  let res = await http.get('/api/config/list', { code: 'logo' })
  if (res.code == 200) {
    logo.value = res.data.list[0].value
  }

  let res1 = await http.get('/api/config/list', { code: 'bglogin' })
  if (res1.code == 200) {
    bgLogin.value = res1.data.list[0].value
    console.log(
      '%c [ bgLogin.value  ]-69',
      'font-size:13px; background:#333333; color:#f3f3f3;',
      bgLogin.value,
    )
  }
}

const back = () => {
  uni.switchTab({ url: '/pages/index/index' })
}

getConfig()

// 获取头像
const handleChooseAvatar = (e) => {
  avatar.value = e.detail.avatarUrl
}

const handleFocus = (e) => {
  if (e.detail.value) {
    nickname.value = e.detail.value
  }
}
const userStore = useUserStore()
// 登录处理
const handleLogin = async () => {
  if (!checked.value) {
    uni.showToast({
      title: '请勾选同意用户协议和隐私政策',
      icon: 'none',
      mask: true,
    })

    return
  }

  // #ifdef H5
  let res = await http.get('/api/user/login', { phone: '13003304075', password: 123456 })
  if (res.code == 200) {
    userStore.setUserInfo(res.data.user)
    userStore.token = res.data.token
    uni.setStorageSync('token', res.data.token)

    // 3. 登录成功后跳转页面
    uni.switchTab({
      url: '/pages/index/index',
    })
  }

  // #endif
  // #ifdef MP-WEIXIN
  try {
    const res = await uni.login({
      provider: 'weixin',
    })

    let resp = await http({
      url: '/api/applet/login',
      method: 'POST',
      query: { code: res.code },
    })

    if (resp.code == 200) {
      userStore.setUserInfo(resp.data.user)
      userStore.token = resp.data.token

      uni.setStorageSync('token', resp.data.token)

      uni.showToast({
        title: '登录成功',
        icon: 'success',
      })

      // 3. 登录成功后跳转页面
      uni.switchTab({
        url: '/pages/index/index',
      })
    }
  } catch (error) {
    uni.showToast({
      title: '登录失败',
      icon: 'none',
    })
  }
  // #endif
}
</script>

<style scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.logo-image {
  width: 80px;
  height: 80px;
}

.title {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

input {
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: border-color 0.3s;
}

input:focus {
  border-color: #ff8c00;
  outline: none;
}

.error-message {
  margin-top: 4px;
  font-size: 12px;
  color: #ff4d4f;
}

.get-code-btn {
  position: absolute;
  top: 32px;
  right: 10px;
  font-size: 14px;
  color: #ff8c00;
  cursor: pointer;
  background: none;
  border: none;
}

.get-code-btn:disabled {
  color: #999;
  cursor: not-allowed;
}

.login-btn {
  height: 48px;
  font-size: 16px;
  font-weight: bold;
  line-height: 48px;
  color: white;
  cursor: pointer;
  background-color: #ff8c00;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #ff7300;
}

.privacy-policy {
  margin-top: 48rpx;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.privacy-policy a {
  color: #ff8c00;
  text-decoration: none;
}

.w-24.h-24 {
  margin-bottom: 12px;
  border-radius: 50%;
}

.get-info-btn,
.get-nickname-btn {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 40px;
}

.get-nickname-btn {
  background-color: #1aad19;
}

input:disabled {
  color: #333;
  background-color: #f5f5f5;
}
</style>
